<template>
  <div class="tree-container">
    <div class="title">
      <span class="input-text">参数名称</span
      ><span class="input-text">中文名称</span><span class="checkbox">空值</span
      ><span class="input-text">类型</span>
    </div>
    <el-tree
      :data="dataSource"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
    >
      <template #default="{ node, data }">
        <el-input
          v-model="data.paramName"
          size="small"
          placeholder="输入参数名称"
          class="input-text"
          :disabled="disabled"
        />
        <el-input
          v-model="data.paramNameCn"
          size="small"
          placeholder="输入中文名称"
          class="input-text"
          :disabled="disabled"
        />
        <el-checkbox
          v-model="data.required"
          :true-label="1"
          :false-label="0"
          class="checkbox"
          :disabled="disabled"
        />
        <el-select
          v-model="data.type"
          placeholder="选择类型"
          size="small"
          class="input-text"
          :disabled="disabled"
        >
          <el-option
            v-for="(item, index) in typeOptions"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
        <el-icon class="icon-node add-node" v-show="!disabled">
          <CirclePlus @click="append(data)" />
        </el-icon>
        <el-icon
          style="margin-left: 8px"
          @click="remove(node, data)"
          class="icon-node remove-node"
          v-show="!disabled"
        >
          <Remove />
        </el-icon>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from "vue";
import { CirclePlus, Remove } from "@element-plus/icons";
const typeOptions = ["text", "numeric", "boolean", "object", "array"];
const props = defineProps({
  modelValue: {
    type: Array,
    default: [],
  },
  type: {
    type: String,
    default: "",
  },
});
const disabled = ref(false);
const emit = defineEmits(["update:modelValue"]);
let id = 1000;
const append = (data) => {
  const newChild = {
    id: id++,
    paramName: "",
    paramNameCn: "",
    required: 0,
    type: "",
    children: [],
  };
  if (!data.children) {
    data.children = [];
  }
  data.children.push(newChild);
  dataSource.value = [...dataSource.value];
};
const remove = (node, data) => {
  const parent = node.parent;
  const children = parent.data.children || parent.data;
  const index = children.findIndex((d) => d.id === data.id);
  children.splice(index, 1);
  dataSource.value = [...dataSource.value];
};
const dataSource = computed({
  get() {
    if (props.modelValue.length == 0) {
      return [
        {
          id: 1000,
          paramName: "",
          paramNameCn: "",
          required: 0,
          type: "",
          children: [],
        },
      ];
    } else return props.modelValue;
  },
  set(val) {
    // imgUrl改变时触发修改父组件绑定的v-model的值
    emit("update:modelValue", val);
  },
});
watch(
  dataSource,
  (val) => {
    emit("update:modelValue", val);
  },
  { deep: true }
);
onMounted(() => {
  disabled.value = props.type == "detail" ? true : false;
});
</script>

<style lang="scss">
.tree-container {
  margin-bottom: 30px;

  .title {
    padding-left: 25px;
    font-size: 14px;
    height: 30px;
    display: flex;
  }

  .input-text {
    width: 250px;
    margin-right: 20px;
  }

  .checkbox {
    width: 40px;
  }

  .el-input--small .el-input__inner {
    height: 30px;
    border-radius: 3px;
  }

  .el-tree-node__content {
    height: 40px;

    .label.el-checkbox {
      margin-right: 0;
    }
  }

  .icon-node {
    font-size: 24px;
    border-radius: 50%;

    &.add-node {
      color: #6391f4;
      background: #2e69eb1a;
    }

    &.remove-node {
      color: #ffa05b;
      background: #ff8b3a1a;
    }
  }

  .el-checkbox__inner {
    height: 20px;
    width: 20px;

    &:after {
      height: 12px;
      width: 7px;
      left: 5px;
    }
  }
}
</style>
